var stage = new Kinetic.Stage("clockContainer", 1024, 768);  
var backgroundLayer = new Kinetic.Layer();
var animatedLayer = new Kinetic.Layer();
var taskLayer = new Kinetic.Layer();
var dummyLayer = new Kinetic.Layer();

window.onload = function(){
    var workMode = 'clock';

    
    
    var bgCircle = new Kinetic.Shape({
        drawFunc: function(){
            var context = this.getContext();
            context.beginPath(); 
            context.arc(Copper.Global.centerX, Copper.Global.centerY, Copper.Global.clockRaius, 0, Math.PI * 2, false); // outer (filled) 
            context.arc(Copper.Global.centerX, Copper.Global.centerY, Copper.Global.clockRaius + 
                5, Math.PI * 2, 0,  true); // inner (unfills it) 
            context.fillStyle = 'rgba(255, 255, 255, 0.65)';
            context.fill();
            context.closePath();
        }
    });
    backgroundLayer.add(bgCircle);
    
    var timer = new Kinetic.Shape({
        drawFunc: function(){
            var context = this.getContext();
            context.fillStyle = "white"; 
             
            var date = new Date();
            context.font="18px Segoe UI"; 
            context.fillText($.dateformat.format('D,M d', date), Copper.Global.centerX - 20, Copper.Global.centerY - 20);
            context.font="48px Segoe UI bold";
            context.fillText($.dateformat.format('H:i', date), Copper.Global.centerX - 58, Copper.Global.centerY + 20);
            context.font="18px Segoe UI"; 
            context.fillText('PM', Copper.Global.centerX + 40, Copper.Global.centerY + 40);
            
            /*
            var angle = Math.PI * 2 * date.getSeconds() / 60 - Math.PI / 2;
            var x = Copper.Global.centerX + Math.cos(angle) * (Copper.Global.clockRaius - 2);
            var y = Copper.Global.centerY + Math.sin(angle) * (Copper.Global.clockRaius - 2); 
            context.beginPath(); 
            context.arc(x, y, 2, 0, Math.PI * 2, false);
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            */
            
            Copper.Global.amPm = date.getHours() > 11? 'PM': 'AM';
        }
    });
    animatedLayer.add(timer);
    
    /*
    document.body.addEventListener('click', function(e){
        var pos = stage.getMousePosition(e); 
        var mx = pos.x - star.getPosition().x;
        var step = mx / (300 / 13);
         
        var fn = function(){
            star.setPosition(pos.x, pos.y);
            animatedLayer.draw();
        };
        
    }, false);
    */
    stage.add(backgroundLayer);    
    stage.add(animatedLayer);
    stage.add(taskLayer);
    stage.add(dummyLayer);
    Copper.DummyLayer.init();
    
    stage.onFrame(function(frame){
        animatedLayer.draw();
    });
    stage.start();  

    //dummyLayer.getCanvas().style.background = 'rgba(0,0,0,0.4)';
    dummyLayer.getCanvas().style.display = 'none';
    
    Copper.TaskManager.load();
    Copper.TaskManager.render(taskLayer);

    //init to do list
    Copper.ToDoList.init(document.getElementById('toDoList'));
    
    Copper.TaskSchedule.init(document.getElementById('scheduleContainer'));
    
    document.getElementById('toDoListBtn').addEventListener('click', Copper.ToDoList.showOrHide, false);
    document.getElementById('clockBtn').addEventListener('click', function(){
        this.style.color = 'white';
        document.getElementById('scheduleBtn').style.color = 'black';
        document.getElementById('clockContainer').style.display = 'block';
        document.getElementById('calendarBtn').style.display = 'none';
        Copper.TaskSchedule.hide();
        Copper.Global.workMode = 'CLOCK';
        Copper.ToDoList.showOrHide(true);
    }, false);
    document.getElementById('scheduleBtn').addEventListener('click', function(){
        this.style.color = 'white';
        document.getElementById('clockBtn').style.color = 'black';
        document.getElementById('clockContainer').style.display = 'none';
        document.getElementById('calendarBtn').style.display = '';
        Copper.TaskSchedule.show();
        Copper.Global.workMode = 'SCHEDULE';
        Copper.ToDoList.showOrHide(false);
    }, false);
    
    //init datepicker
    $( "#calendarInput" ).datepicker({
        //buttonImageOnly: true,
        //buttonImage: 'image/calendar.jpg',
        //buttonText: 'Calendar',
        //showOn: 'button',
        dateFormat: 'yymmdd',
        onSelect: function(){
             Copper.Global.currentDate = this.value; 
        },
    });
    document.getElementById('calendarBtn').addEventListener('click', function(){
        $( "#calendarInput" ).datepicker('show');
    }, false); 
    
    Copper.TaskForm.init(document.getElementById('formContainer'));
};